<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/header"/>
<body>

<!--导航-->
<header th:include="common/nav" />

<!--发布食谱-->
<div class="publish-cookbook shadow-right-bottom">
    <div class="row">
        <div class="tip">食谱名称</div>
        <input id="cookbookname" class="cookbook-name" type="text" placeholder="请填写食谱名称，10字以内"/>
    </div>
    <!--属性-->
    <div class="row">
        <div class="tip select-tip">适宜人群</div>
        <select id="appropriatecrowd" class="select">
            <option class="option" value="健身达人">健身达人</option>
            <option class="option" value="减肥达人">减肥达人</option>
            <option class="option" value="养颜系列">养颜系列</option>
            <option class="option" value="孕妇">孕妇</option>
            <option class="option" value="孕妇">孕妇</option>
            <option class="option" value="产妇">产妇</option>
            <option class="option" value="婴儿">婴儿</option>
            <option class="option" value="儿童">儿童</option>
            <option class="option" value="老人">老人</option>
            <option class="option" value="幼儿">幼儿</option>
            <option class="option" value="哺乳期">哺乳期</option>
            <option class="option" value="青少年">青少年</option>
        </select>
        <div class="tip select-tip">菜系</div>
        <select id="style" class="select">
            <option class="option" value="家常菜">家常菜</option>
            <option class="option" value="夜宵">素食</option>
            <option class="option" value="早餐">早餐</option>
            <option class="option" value="午餐">午餐</option>
            <option class="option" value="晚餐">晚餐</option>
            <option class="option" value="夜宵">夜宵</option>
        </select>
        <div class="tip select-tip">工艺</div>
        <select id="craft" class="select">
            <option class="option" value="蒸">蒸</option>
            <option class="option" value="煮">煮</option>
            <option class="option" value="电饭煲">电饭煲</option>
            <option class="option" value="微波炉">微波炉</option>
            <option class="option" value="烤箱">烤箱</option>
        </select>
        <div class="tip select-tip">口味</div>
        <select id="taste" class="select">
            <option class="option" value=微辣">微辣</option>
            <option class="option" value="中辣">中辣</option>
            <option class="option" value="麻辣">麻辣</option>
            <option class="option" value="酸甜">酸甜</option>
            <option class="option" value="酸咸">酸咸</option>
            <option class="option" value="咸甜">咸甜</option>
            <option class="option" value="甜味">甜味</option>
            <option class="option" value="苦味">苦味</option>
            <option class="option" value="原味">原味</option>
            <option class="option" value="清淡">清淡</option>
            <option class="option" value="葱香">葱香</option>
            <option class="option" value="酱香">酱香</option>
            <option class="option" value="孜然">孜然</option>
            <option class="option" value="麻香">麻香</option>
            <option class="option" value="其他">其他</option>
        </select>
        <div class="tip select-tip">烹饪时间</div>
        <select id="duration" class="select">
            <option class="option" value="10分钟">10分钟</option>
            <option class="option" value="20分钟">20分钟</option>
            <option class="option" value="半小时">半小时</option>
            <option class="option" value="一小时">一小时</option>
            <option class="option" value="数小时">数小时</option>
        </select>
        <div class="tip select-tip">难度</div>
        <select id="difficulty" class="select">
            <option class="option" value="简单">简单</option>
            <option class="option" value="普通">普通</option>
            <option class="option" value="高级">高级</option>
            <option class="option" value="神级">神级</option>
        </select>

    </div>
    <!--成品图-->
    <div class="row">
        <div class="cover-img">
            <input class="upload-input cover-img" type="file"/>
            <img id="coverimg" class="img cover-img" src=""/>
        </div>
        <div class="food-box">
            <span class="tip">主料</span>
            <div id="mainFood" class="food-box-sub">
                <div class="food">
                    <input list="mainFoodList_0" foodid="" class="input-food" placeholder="请搜索食材">
                    <datalist id="mainFoodList_0" class="datalist-food">
                    </datalist>
                    <div class="op">
                        <div class="op-food add">+</div>
                        <div class="op-food remove">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--间隔-->
<div class="interval"></div>
<div id="steps" class="steps">
    <div class="step shadow-right-bottom">
        <div class="step-no">1</div>
        <div class="step-content">
                <textarea class="stepcontent content" placeholder="请输入步骤描述"
                          maxlength="100"
                          onchange="this.value=this.value.substring(0, 100)"
                          onkeydown="this.value=this.value.substring(0, 100)"
                          onkeyup="this.value=this.value.substring(0, 100)"></textarea>
        </div>
        <div class="step-img">
            <div class="upload-img step-img">
                <input class="upload-input inputStepimg step-img change-img" type="file"/>
                <img class="img step-img stepimg" src=""/>
            </div>
        </div>
        <div class="op-step">
            <div class="add">+</div>
            <div class="remove">-</div>
        </div>
    </div>

</div>

<div class="tipBtn">
    <div id="publish" class="btn-div publish">发布</div>
</div>
<div th:include="common/bottom"></div>
</body>
    <script th:src="@{/js/publishCookbook.js}"></script>
    <link rel="stylesheet" th:href="@{/css/publishCookbook.css}"/>
</html>